<template>
	<div id="container">
		<div id="position_content">
			<el-form>
				<el-form-item width="200px">
					<el-input  v-model="position.p_no">
						<template #prepend>
							&nbsp;岗位编号
						</template>
					</el-input>
				</el-form-item>
				<el-form-item width="200px">
					<el-input  v-model="position.p_name">
						<template #prepend>
							&nbsp;岗位名称
						</template>
					</el-input>
				</el-form-item>
				<el-form-item width="200px">
					<el-input  v-model="position.p_establishment">
						<template #prepend>
							&nbsp;岗位编制
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<div class="right">
						<el-button @click="add()">增加岗位</el-button>
					</div>
					<div class="right">
						<el-button @click="delAll()">批量删除岗位</el-button>
					</div>
					<div class="right">
						<el-button @click="update()">修改岗位</el-button>
					</div>
					<div class="right">
						<el-button @click="search()">查询岗位</el-button>
					</div>
					<div class="right">
						<el-button @click="jump()">跳转人员管理页面</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div id="current_position">
			<el-table
				:data="positions"
				:border="true"
				:stripe="true"
				border stripe style="width: 100%" ref="multipleTable"
				:default-sort="{ prop: 'staff_no', order: '' }" 
				@selection-change="handleSelectionChange"
				size="large">
				<el-table-column type="selection" width="55" v-if="true" />
				<el-table-column label="岗位编号" prop="p_no" width="200"></el-table-column>
				<el-table-column label="岗位名称" prop="p_name" width="200"></el-table-column>
				<el-table-column label="岗位编制" prop="p_establishment" width="200"></el-table-column>
				<el-table-column label="操作" width="100px">
					<template #default="scope">
						<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default{
		name:'PositionView',
		created() {
			this.search();
		},
		data() {
			return{
				position:{
					p_no:'',
					p_name:'',
					p_establishment:'',
				},
				positions:[],
				delPositions: [],
				isRouterAlive: true,
				del_list: [],
			}
		},
		methods:{
			search(){
				this.$axios.post("http://localhost:8088/eStaff/position/findByPos",this.position)
				.then(rst=>{
					this.positions=rst.data.result;
				}).catch(err=>{
					console.log(err)
				})
			},
			add(){
				this.$router.push("/positionAdd");
			},
			update(row){
				let str = JSON.stringify(this.position);
				console.log(str)
				this.$axios.post("http://localhost:8088/eStaff/position/changePosition", this.position)
					.then(rst => {
						if (rst.data.code == 200) {
							// this.$message("操作结束");
							this.$alert("操作成功", rst.data.msg);
							console.log(rst.data);
							this.$router.push("/position");
						} else {
							this.$alert("操作失败", rst.data.msg);
						}

					}).catch(err => {
						console.log(err);
					})
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.multipleTable.toggleRowSelection(row)
					})
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleDelete(index, row) {
				this.$message.error('删除第' + (index + 1) + '行');
				this.del_list = this.del_list.concat(this.positions[index]);
				console.log(this.del_list);
				this.$axios.post("http://localhost:8088/eStaff/position/deletePosition", this.del_list)
					.then(rst => {
						if (rst.data.code == 200) {
							// this.$message("操作结束");
							this.$alert(rst.data.msg, "成功");
							this.$message.error('删除了' + str);
						} else {
							this.$alert(rst.data.msg, "失败");
						}
						console.log(rst.data);
					}).catch(err => {
						console.log(err);
					})
			
				this.del_list = [];
			
				// 刷新搜索框
				this.search()
			},
			delAll() {
				const length = this.multipleSelection.length;
				let str = '';
				this.del_list = this.del_list.concat(this.multipleSelection);
			
				// console.log(this.del_list);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i] + ' ';
				}
				str = JSON.stringify(this.multipleSelection);
				console.log(str);
			
				this.$axios.post("http://localhost:8088/eStaff/position/deletePosition", this.del_list)
					.then(rst => {
						if (rst.data.code == 200) {
							this.$alert(rst.data.msg, "成功");
							this.$message.error('删除了' + str);
						} else {
							this.$alert(rst.data.msg, "失败");
						}
						console.log(rst.data);
					}).catch(err => {
						console.log(err);
					})
				// 重置选中内容
				this.multipleSelection = [];
				this.del_list = [];
				this.search();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection);
			},
			jump(){
				this.$router.push("/StaffInfoList");
			}
		},
	}
</script>

<style scoped>
	#container{
		width: 100%;
		height: 100%;
		background-color: seashell;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#login_content h1{
		text-align: center;
		width: 100%;
		height: 50px;
	}
	#login_content .right{
		width: 100%;
		height: 40px;
		text-align: center;
	}
	#login_content a{
		text-decoration: none;
		margin-right: 20px;
	}
	#current_position {
		height: 100%;
		padding: 10px;
	}
	
	#bottom {
		width: 100%;
		height: 30px;
		font-size: 12px;
		border-top: 1px solid darkgray;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
